<script setup lang="ts">
import type { DateList } from './interface';

import { computed, ref, watch } from 'vue';

import { MdiMinus2, MdiPlus2 } from '@vben/icons';

import { InputNumber, message, Modal, RangePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

import { updateRoomPrice } from '#/api';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object as () => DateList,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:show', 'upList']);

const open = computed({
  get() {
    return props.show;
  },
  set(newValue) {
    emit('update:show', newValue);
  },
});

// 房间价格
const roomPrice = ref();
// 加载
const confirmLoading = ref(false);

// 日期范围
const dateRange = ref<[string, string][]>([['', '']]);

// 禁用当天之前的日期
const disabledDate = (current: dayjs.Dayjs) => {
  return current && current < dayjs().startOf('day');
};

// 选择日期范围
const dateChange = (e: any, index: number) => {
  dateRange.value[index] = e?.map((item: any) =>
    dayjs(item).format('YYYY-MM-DD'),
  );
};

watch(
  () => props.data,
  (val) => {
    if (val) {
      dateRange.value = [[val.saleDate, val.saleDate]];
      roomPrice.value = val.sellPrice;
    }
  },
  {
    immediate: true,
  },
);

// 点击确定按钮事件提交表单 成功后关闭弹窗
const handleOk = async () => {
  confirmLoading.value = true;
  try {
    const timeList =
      dateRange.value?.map((item) => ({
        startTime: item[0],
        endTime: item[1],
      })) || [];
    await updateRoomPrice({
      priceList: [
        {
          price: roomPrice.value,
          roomTypeId: props.data.roomId,
        },
      ],
      timeList,
    });
    confirmLoading.value = false;
    open.value = false;
    message.success('修改成功');
    emit('upList');
  } catch (error) {
    confirmLoading.value = false;
    console.error('房态设置失败：', error);
  }
};
</script>

<template>
  <Modal
    v-model:open="open"
    :confirm-loading="confirmLoading"
    title="修改价格"
    width="800px"
    @ok="handleOk"
  >
    <div class="card-box mb-3 mt-2 max-h-[70vh] overflow-y-auto rounded-none">
      <div class="flex">
        <div class="w-[150px] bg-black bg-opacity-5 p-3 font-bold">
          房型名称
        </div>
        <div class="flex-auto p-3">{{ data.nameZh || '' }}</div>
      </div>
      <div class="flex border-t">
        <div class="w-[150px] bg-black bg-opacity-5 p-3 font-bold">日期</div>
        <div class="flex-auto p-3">
          <div
            v-for="(item, index) in dateRange"
            :key="index"
            class="mt-3 flex w-full flex-wrap items-center"
          >
            <RangePicker
              :disabled-date="disabledDate"
              :value="
                item[0] && item[1]
                  ? [dayjs(item[0], 'YYYY-MM-DD'), dayjs(item[1], 'YYYY-MM-DD')]
                  : undefined
              "
              @change="dateChange($event, index)"
            />
            <MdiMinus2
              v-if="dateRange.length !== 1"
              class="text-primary ml-2 cursor-pointer text-3xl"
              @click="() => dateRange.splice(index, 1)"
            />
            <MdiPlus2
              v-if="index === dateRange.length - 1"
              class="text-primary ml-2 cursor-pointer text-3xl"
              @click="() => dateRange.push(['', ''])"
            />
          </div>
        </div>
      </div>
      <div class="flex border-t">
        <div class="w-[150px] bg-black bg-opacity-5 p-3 font-bold">价格</div>
        <div class="flex-auto p-3">
          <div class="flex items-center">
            <span class="mr-2">卖价(元)</span>
            <InputNumber
              v-model:value="roomPrice"
              :controls="false"
              :max="999999"
              :min="0"
              style="width: 120px"
            />
          </div>
          <div class="mt-2 flex items-center opacity-60">
            原卖价：{{ data.sellPrice || '-' }}元
          </div>
        </div>
      </div>
      <div class="flex border-t">
        <div class="w-[150px] bg-black bg-opacity-5 p-3 font-bold">餐食</div>
        <div class="flex-auto p-3">{{ data.breakfastNum || '0' }}份</div>
      </div>
    </div>
  </Modal>
</template>

<style scoped lang="scss">
.text {
  color: hsl(var(--card-foreground));
}
</style>
